<template>
  <!-- 拖拽和缩放 -->
  <div class="drag" ref="drag">
    <div @click.stop="() => {}" style="width: 100%; height: 100%">
      <slot></slot>
    </div>
  </div>
</template>

<script>
import CreateDragRect from "./drag";
// 涉及到单位的统一都是px
export default {
  name: "Drag",
  props: {
    rectDefaultPosition: {
      type: String,
      default: "absolute",
    },
    rectBackgroundColor: {
      type: String,
      default: "#ccc",
    },
    // 拖动横坐标最小值，默认不设置，不限制
    minX: {
      type: [String, Number],
      default: null,
    },
    // 拖动纵坐标最小值，默认不设置，不限制
    minY: {
      type: [String, Number],
      default: null,
    },
    // 拖动横坐标最大值，默认不设置，不限制
    maxX: {
      type: [String, Number],
      default: null,
    },
    // 拖动纵坐标最大值，默认不设置，不限制
    maxY: {
      type: [String, Number],
      default: null,
    },
    //当前元素的初始left
    rectDefaultLeft: {
      type: [String, Number],
      default: 0,
    },
    //当前元素的初始top
    rectDefaultTop: {
      type: [String, Number],
      default: 0,
    },
    // 元素初始宽度
    rectWidth: {
      type: [String, Number],
      default: 100,
    },
    rectHeight: {
      type: [String, Number],
      default: 100,
    },
    // 缩放时最小宽
    rectMinWidth: {
      type: [String, Number],
      default: 5,
    },
    // 缩放时最小高
    rectMinHeight: {
      type: [String, Number],
      default: 5,
    },
    // 缩放时最大宽
    rectMaxWidth: {
      type: [String, Number],
      default: null,
    },
    // 缩放时最大高
    rectMaxHeight: {
      type: [String, Number],
      default: null,
    },
    // 当前元素背景
    background: {
      type: String,
      default: "#ccc",
    },
    // 缩放图标大小
    dragIconSize: {
      type: [String, Number],
      default: 4,
    },
    // 缩放图标颜色
    dragIconColor: {
      type: String,
      default: "#f00",
    },
  },
  data() {
    return {};
  },
  mounted() {
    console.log(this.$props);
    const params = { ...this.$props };
    this.dr = new CreateDragRect(this.$refs.drag, params);
  },
};
</script>

<style scoped>
.drag {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
</style>
